import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class ListPage extends StatefulWidget {
  const ListPage({Key? key}) : super(key: key);

  @override
  State<ListPage> createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YJAppBar(
        isScaffold: true,
        title: TextView.text("List 列表"),
        backgroundColor: YJColors.WHITE,
      ),
      body: Container(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 10),
        child: SingleChildScrollView(
          child: buildCenter(context),
        ),
      ),
      backgroundColor: YJColors.BACKGROUND_COLOR,
    );
  }

  buildCenter(BuildContext context) {
    return SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            buildText("基础"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              bgColor: YJColors.WHITE,
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("右侧纯文本"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              hintTitleText: "提示内容",
              bgColor: YJColors.WHITE,
              iconRight: const SizedBox(),
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("重要必填"),
            YJListTile(
              onTap: () {},
              title: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    alignment: Alignment.bottomCenter,
                    child: TextView.text("*",
                        color: Colors.red,
                        fontSize: YJSize.SP_16,
                        isLineHeight: false),
                  ),
                  TextView.text("列表标题",
                      fontSize: YJSize.SP_16, color: YJColors.BLACK85)
                ],
              ),
              bgColor: YJColors.WHITE,
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("右侧提示文案"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              hintTitleText: "提示内容",
              bgColor: YJColors.WHITE,
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("右侧头像"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              hintTitle: const Icon(
                Icons.mood_bad_sharp,
                color: YJColors.PRIMARY,
                size: 24,
              ),
              bgColor: YJColors.WHITE,
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("图标文字"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              iconTitle: Container(
                color: YJColors.PRIMARY,
                width: 24,
                height: 24,
              ),
              bgColor: YJColors.WHITE,
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("右侧开关"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              bgColor: YJColors.WHITE,
              iconRight: YJToggle(
                onChanged: (val) {},
                value: true,
                type: YJToggleType.ios,
                enabledTrackColor: YJColors.PRIMARY,
              ),
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("右侧角标"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              bgColor: YJColors.WHITE,
              hintTitle: const YJBadge(
                shape: YJBadgeShape.pills,
                text: "99+",
                border: BorderSide(
                  color: Colors.white,
                  width: 1,
                ),
              ),
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("右侧按钮"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              bgColor: YJColors.WHITE,
              iconRight: YJButton(
                onPressed: () {},
                text: "按钮",
                size: YJSize.dp(32),
                type: YJButtonType.outline,
                shape: YJButtonShape.pills,
                color: YJColors.DISABLED_COLOR2,
                textColor: YJColors.THEME_COLOR,
              ),
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("右侧重要信息"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              bgColor: YJColors.WHITE,
              hintTitle: TextView.text("+52.8",
                  fontSize: YJSize.SP_16,
                  color: YJColors.BLACK65,
                  isLineHeight: false),
              iconRight: const SizedBox(),
              margin: const EdgeInsets.only(top: 8),
            ),
            buildText("右侧数据反馈"),
            YJListTile(
              onTap: () {},
              titleText: "列表标题",
              bgColor: YJColors.WHITE,
              hintTitle: TextView.text("数据反馈内容",
                  fontSize: YJSize.SP_16, color: YJColors.BLACK65),
              margin: const EdgeInsets.only(top: 8),
            ),
            const SizedBox(height: 35),
          ],
        ));
  }

  Widget buildText(String title) => Padding(
        padding: const EdgeInsets.symmetric(vertical: 10),
        child: TextView.text(title, fontSize: 12, color: YJColors.BLACK65),
      );
}
